//展示购物车中的商品
function show() {

    let id = localStorage.getItem("uid");
    // console.log("uid");
    ajax({
        method: "get",
        url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
        params: {
            id
        },
        success(obj) {
            console.log(obj)

            let arr = obj.data;
            console.log(arr)
            let html = '';

            arr.forEach(obj => {
                html += ` <ul class="car_item  car_item_ufo"   data_id="${obj.pid}">
            <li class="car_item_one">
                <input type="checkbox"  class="car_dx" checked="">
             <img src="${obj.pimg}" class="car_item_img"  alt="">
                <p>${obj.pname}</p>
            </li>
            <li>
                <p class="car_item_price">${obj.pprice}</p>
            </li>
            <li>
                <div class="car_item_num">
                <span class="minus">-</span>
                <input type="text" value="${obj.pnum}" class="perznum">
                <span class="plus">+</span>
                </div>
            </li>
            <li> <p class="car_item_xj">${obj.pnum*obj.pprice}</p></li>
            <li>
                <p class="car_item_del">删除</p>
            </li>
        </ul>`

            })
            let list = document.querySelector('.car_item');
            list.innerHTML = html;


            let hhh = document.getElementById("hhh")
            let car_item_ufo = $(".car_item_ufo").get()
            let checkAll = $(".group_show_top1") //取到两个全选框
            console.log(checkAll)
            // let carli = $(".car_item_one") //获取所有的li
            let dx = $(".car_dx") //获取所有的单选框
            let perprice = $(".car_item_price") //获取所有的单价
            let minus = $(".minus") //获取减号
            // console.log(minus)
            let perznum = $(".perznum") //获取单个商品的购买总数框
            let plus = $(".plus") //获取加号
            let xj = $(".car_item_xj") //获取单个商品总价框
            console.log(xj)
            let del_btn = $(".car_item_del") //获取删除按钮
            let xzspnum = $(".xzspnum") //获取共选中商品的文本框
            let zj = $(".zj") //获取所有商品总价框
            let js = $(".item_js") //获取结算按钮

            xzspnum.text($(".car_dx:checked").length)
            getTotalPrice()

            checkAll.eq(0).click(function () {
                dx.prop("checked", checkAll.eq(0).prop("checked"))
                checkAll.eq(1).prop("checked", dx.eq(0).prop("checked"))
                //记录单选框选中的个数输出到文本
                if (checkAll.eq(0).prop("checked")) {
                    xzspnum.text($(".car_dx:checked").length)
                    // console.log(xzspnum.text(dx.length))
                    getTotalPrice()

                } else {
                    xzspnum.text(0);

                    getTotalPrice()
                }
                getTotalPrice()
            })

            //第二个全选框和第一个全选框同步的操作
            checkAll.eq(1).click(function () {
                dx.prop("checked", checkAll.eq(1).prop("checked"))
                checkAll.eq(0).prop("checked", dx.eq(0).prop("checked"))
                //记录单选框选中的个数输出到文本
                if (checkAll.eq(1).prop("checked")) {
                    xzspnum.text(dx.length);
                } else {
                    xzspnum.text(0);
                }
                // updateData(i)
                // getTotalPrice()
            })




            //反选 
            /*当选中商品的数量的状态 等于 购物车单选框的数量时 全选按钮选中 */

            dx.click(function () {
                if ($(".car_dx:checked").length === dx.length) {
                    checkAll.prop('checked', true);
                    // getTotalPrice()
                } else {
                    checkAll.prop('checked', false)
                    // getTotalPrice()
                }
                xzspnum.text($(".car_dx:checked").length)
                // console.log($(".car_dx:checked").length)
                getTotalPrice()
            })



            //数量的加减
            //减法
            for (let i = 0; i < minus.length; i++) {
                minus[i].onclick = () => {
                    if (perznum[i].value <= 1) {
                        perznum[i].value == 1
                    } else {
                        perznum[i].value--
                        xj[i].innerText = perprice[i].innerText * perznum[i].value;
                    }
                    getTotalPrice()
                    updateData(i)
                }
            }
            //加法
            for (let i = 0; i < plus.length; i++) {
                plus[i].onclick = () => {
                    perznum[i].value++
                    xj[i].innerText = perprice[i].innerText * perznum[i].value;
                    updateData(i)
                    getTotalPrice()
                    console.log($(".dk"))
                }

            }



            //数量文本框的变化 修改数量文本框
            getTotalPrice()
            for (let i = 0; i < perznum.length; i++) {
               
             
                perznum[i].onchange = function () {
                    console.log(perznum[i])

                    if (perznum[i].value <= 0) {
                        perznum[i].value = 1;
                       
                    }
                    updateData(i)
                  
                  
                }

              
            }


            //删除
            for (let i = 0; i < $(".car_item_del").length; i++) {
                // console.log(del_btn.length)
                // console.log(i)
                $(".car_item_del").eq(i).click(function () {
                    console.log($(".car_item_del").get()[i])
                    //接口删除购物车商品
                    let pid = car_item_ufo[i].getAttribute("data_id")

                    // dx[i].checked = false;
                    // console.log(car_item_ufo[i].parentNode);     
                    hhh.removeChild(car_item_ufo[i]);
                    delData(pid)
                    getTotalPrice()
                    //  console.log(dx.length)
                    xzspnum.text($(".car_dx:checked").length)
                    if ($(".car_dx").length == $(".car_dx:checked").length) {
                        $(".group_show_top1").prop("checked", true);
                    }

                    if ($(".car_dx:checked").length == 0) {
                        console.log("a")
                        checkAll[0].checked = false
                        checkAll[1].checked = false

                        $(".zj").text(0)
                    }

                })
            }


            function updateData(i) {
                //   console.log(xj[i])
                console.log(perprice[i])
                console.log(perznum[i])
                let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php"

                let pid = car_item_ufo[i].getAttribute("data_id")
                // console.log(pid)
                let uid = localStorage.getItem("uid");
                let pnum = perznum[i].value
                console.log(uid, pnum)


                ajax({
                    method: "get",
                    url,
                    params: {
                        uid,
                        pid,
                        pnum
                    },
                    success(obj) {
                        console.log(obj)

                    }
                })


            }





            function getTotalPrice() {
                // console.log("b")
                let ceo = 0;

                //  console.log(dk.get())
                // console.log($(".car_dx"))
                for (let i = 0; i < $(".car_dx").get().length; i++) {
                    // console.log(i)
                    if ($(".car_dx").eq(i).prop("checked")) {
                        // console.log(i)
                        // console.log(perTotalPrice.eq(i).text());
                        ceo += parseInt($(".car_item_xj").eq(i).text());
                        // console.log(ceo)
                        $(".zj").text(ceo);
                    }
                }

            }

            //删除
            function delData(pid) {
                let uid = localStorage.getItem("uid")
                let url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php"

                ajax({
                    method: "get",
                    url,
                    params: {
                        uid,
                        pid
                    },
                    success(obj) {
                        console.log(obj)
                    }
                })

            }


        }
    })



























}

show()